<template>
  <div class="InventoryData">
    <el-main>
      <div>
        <el-form :model="form">
          <el-row>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="任务单名称">
                  <el-input v-model="form.name" style="width:340px"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple-light">
                <el-form-item label="分配用户">
                  <el-select v-model="form.userList" multiple placeholder="请选择用户" style="width:340px">
                    <el-option
                      v-for="item in list"
                      :key="item.id"
                      :label="item.username"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <hr>
        <!-- <br> -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="资产类别" prop="assetTypeId">
                  <el-select
                    v-model="form.assetTypeId"
                    clearable
                    placeholder="请选择资产类别"
                    style="width:180px"
                  >
                    <el-option
                      v-for="item in list1"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="资产名称">
                  <el-input v-model="form.assetName"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple-light">
                <el-form-item label="部门:" prop="useOrganizationId">
                  <el-select
                    v-model="form.useOrganizationId"
                    placeholder="请选择部门"
                    clearable
                    style="width:180px;"
                  >
                    <el-option
                      v-for="item in list2"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search"
                >搜索</el-button>
                <el-button type="primary" style="margin:0 0 0 8px;">
                  <router-link to="/User">新增用户</router-link>
                </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData3"
        border
        stripe
        height="270"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="state" label="状态" width="150" :formatter="formatState"></el-table-column>
        <el-table-column prop="pictureUrl" label="照片" width="120">
          <!-- 图片的显示 -->
          <template slot-scope="scope">
            <img
              v-if="scope.row.pictureUrl"
              :src="requestUrl+scope.row.pictureUrl"
              min-width="80"
              height="80"
              @click="lookBigImage(scope.row.pictureUrl)"
            >
          </template>
        </el-table-column>
        <el-table-column prop="assetCode" label="资产编号" width="120"></el-table-column>
        <el-table-column prop="assetName" label="资产名称" width="120"></el-table-column>
        <el-table-column prop="standardType" label="规格" width="120"></el-table-column>
        <el-table-column prop="sn" label="SN号" width="120"></el-table-column>
        <el-table-column prop="unit" label="计量单位" width="120"></el-table-column>
        <el-table-column prop="amount" label="金额(单位:万元)" width="200"></el-table-column>
        <el-table-column prop="ownOrganizationName" label="使用部门" width="120"></el-table-column>
        <el-table-column prop="buyDate" label="购入时间" width="120"></el-table-column>
        <el-table-column prop="useUser" label="使用人" width="120"></el-table-column>
        <el-table-column prop="ownOrganizationName" label="所属公司" width="120"></el-table-column>
        <el-table-column prop="area" label="区域" width="120"></el-table-column>
        <el-table-column prop="storageLocation" label="存放地点" width="120"></el-table-column>
        <el-table-column prop="deadLine" label="使用期限(月)" width="120"></el-table-column>
        <el-table-column prop="assetAdmin" label="管理员" width="120"></el-table-column>
      </el-table>
      <br>
      <div class="block">
        <el-row :gutter="20">
          <el-col :span="20">
            <div class="grid-content bg-purple">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="prev, pager, next, sizes, jumper"
                :total="this.total"
              ></el-pagination>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple">
              <el-button type="primary" @click="reset">重置</el-button>
              <el-button type="primary" @click="createTask">保存</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>
<script>
import { axiosPost, axiosGet,requestUrl } from "@/api/index.js";
export default {
  data() {
    return {
      form: {
        assetTypeId: "",
        userList: [],
        ssetCode: "",
        assetType: "",
        assetName: "",
        area: "",
        imageUrl: "",
        remark: "",
        buyDate: "",
        standardType: "",
        sn: "",
        unit: "",
        amount: "",
        storageLocation: "",
        deadLine: "",
        useUser: "",
        user: "",
        from: "",
        assetAdmin: "",
        department: "",
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        assetList: "",
        useOrganizationId: "",
        pictureUrl: ""
      },
      requestUrl:requestUrl,
      total: 0,
      page: 1,
      pageSize: 10,
      tableData3: [],
      value6: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 1,
      assetList: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      list: [],
      list1: [],
      list2: []
    };
  },
  beforeMount() {
    //获取员工列表接口
    axiosGet("Account/GetStaffList", null).then(res => {
      if (res.status === 200 && res.data.success) {
        this.list = res.data.data;
        axiosGet("Asset/GetAssetTypeList", null).then(res => {
          if (res.status === 200 && res.data.success) {
            this.list1 = res.data.data;
            axiosGet("Account/GetOrganizationInfo", null).then(res => {
              if (res.status === 200 && res.data.success) {
                this.list2 = res.data.data;
                //资产列表接口
                this.getAssetList();
              }
            });
          }
        });
      }
    });
  },

  methods: {
    handleSelectionChange(val) {
      // console.log(val);
      this.assetList = val;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getAssetList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.getAssetList();
    },
    //将数据库对应的数字转换成在用 闲置 报废
    formatState: function(row, column) {
      return row.state === 1 ? "闲置" : row.state === 2 ? "在用" : "报废";
    },

    //重置
    reset: function() {
      this.form.assetTypeId = "";
      this.form.assetName = "";
      this.form.useOrganizationId = "";
      this.form.userList = [];
      this.form.name = "";
      this.$refs.multipleTable.clearSelection();
    },
    //创建盘点任务单接口
    createTask() {
      // console.log(this.form.userList);

      if (this.form.name.length == 0) {
        this.$message.error("请输入盘点任务单名称!");
      } else if (this.form.userList.length == 0) {
        this.$message.error("请分配用户!");
      } else if (this.assetList.length == 0) {
        this.$message.error("请选择盘点资产!");
      } else {
        //得到用户数组  并遍历 生成字符串数组
        var arr = [];
        for (var i = 0; i < this.form.userList.length; i++) {
          var bean = { userId: "" };
          var str = this.form.userList[i];
          bean.userId = str;
          arr.push(bean);
        }
        var userListStr = JSON.stringify(arr); //把用户数组转换成字符串数组
        // console.log(" userList   :   " + userListStr);

        //得到资产数组  并遍历  生成字符串数组
        var ar = [];
        for (var i = 0; i < this.assetList.length; i++) {
          var id = this.assetList[i].id;
          var bean = { assetId: id };
          ar.push(bean);
        }
        var assetListStr = JSON.stringify(ar); //把资产数组转换成字符串数组
        // console.log("assetList   : " + assetListStr);

        //数据请求所要的对象
        var bean = {
          name: this.form.name,
          userList: userListStr,
          assetList: assetListStr
        };
        // console.log(bean);
        axiosPost("Task/CreateTask", bean).then(res => {
          if (res.status === 200 && res.data.success) {
            // this.form = res.data.data;
            this.form.name = "";
            this.form.userList = [];
            this.$refs.multipleTable.clearSelection();

            this.$message({
              showClose: true,
              message: "恭喜你，任务单创建成功",
              type: "success"
            });
          }
        });
      }
    },
    //获取资产列表数据接口用函数封装起来
    getAssetList: function() {
      var assetTypeId = this.form.assetTypeId ? this.form.assetTypeId : "";
      var assetName = this.form.assetName ? this.form.assetName : "";
      var useOrganizationId = this.form.useOrganizationId
        ? this.form.useOrganizationId
        : "";

      var bean = {
        page: this.page,
        pageSize: this.pageSize,
        userId: localStorage.getItem("userId"),
        type: "", //暂时没用
        key: assetName,
        useOrganizationId: useOrganizationId,
        assetTypeId: assetTypeId
      };
      axiosGet("/Asset/GetAssetList", bean).then(res => {
        if (res.status == 200 && res.data.success) {
          this.tableData3 = res.data.data.list;
          this.total = res.data.data.total;
        }
      });
    },
    //根据类别搜索
    search() {
      // console.log(this.form.assetTypeId);
      this.getAssetList();
    },
    lookBigImage(imageUrl) {
      // console.log(imageUrl);
    }
  }
};
</script>
<style lang="scss" scoped>
/* .InventoryData{
  height: 100%;
} */
</style>
